import { Button, Input, Popover, message, Space, Table, Modal, Transfer } from 'antd';
import { SearchOutlined, DeleteOutlined, PlusOutlined, SyncOutlined, AppstoreFilled, EditOutlined } from '@ant-design/icons'
import styles from './index.less';
import { useDispatch, UserModelState, useSelector, } from 'umi';
import React, { useEffect, useRef, useState } from 'react';
import { RecordsObject } from '@/types';
interface MockTypeItem {
    key: string;
    title: string;
    description: string;
}
interface ItemType {
    title: string;
    dataIndex: string;
    key: string;
}
const mockData: MockTypeItem[] = [];
for (let i = 0; i < 20; i++) {
    mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
    });
}
const initialTargetKeys = mockData.filter(item => +item.key > 10).map(item => item.key);
function ConfigTag() {
    const dispatch = useDispatch();
    const [selectedRowKeys, changeSelectedRowKeys] = useState([]); // 选项     
    const  {userList}  = useSelector(
      (state: { sysUser: UserModelState }) => state.sysUser,
    );
    const columns = [
      {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (status: number) => {
          return status === 1 ? <span>正常</span> : <span>禁用</span>
        }
      },
      {
        title: '操作',
        key: 'action',
        render: (text: any, record: any) => (
          <Space size="middle" className={styles.actionStyle}>
            <Button style={styles.edit} icon={<EditOutlined />} type="primary">
              编辑
            </Button>
            <Button icon={<DeleteOutlined />} className={styles.delStyle}>
              删除
            </Button>
          </Space>
        ),
      },
    ];
    
    const configList = JSON.parse(localStorage.getItem('configList') as any);// 获取数据 
    const [showFlag, setShowFlag] = useState(false); // 穿梭框
    const [show, setShow] = useState(true); // 搜索内容
    const [page, setPage] = useState(1);// 当前页码
    const [hovered1, setHovered1] = useState(false); // 悬停提示
    const [hovered2, setHovered2] = useState(false); // 悬停提示
    const [hovered3, setHovered3] = useState(false); // 悬停提示
    const [targetKeys, setTargetKeys] = useState(initialTargetKeys); // 穿梭框
    const [selectedKeys, setSelectedKeys] = useState([]); // 穿梭框
    const [isModalVisible,setisModalVisible] = useState(false); // 设置增加弹框
    const inputRef = useRef(null); // 搜索框
    // const configSearchList = useSelector((state: { SearchConfigList: RecordsObject[] }) => state.SearchConfigList);
    const UserSearchList = JSON.parse(localStorage.getItem('UserSearchList') as any);// 获取数据
    const [searchCon, setSearchCon] = useState('');



    // 转换数据结构，增加key字段
    configList.map((item: any) => {
        return item.key = item.id
    })

    useEffect(() => {
      dispatch({
        type: 'sysUser/getUser',
      });
    }, [])

    // 删除
    // 删除接口
    async function delfirm(text: any) {
        // await dispatch({
        //     type: 'page/delPageList',
        //     payload: text.id
        // })

        // await dispatch({
        //     type: 'page/getPageList',
        //     payload: page
        // })
    }

   

    // 全选单选
    // 设置多选框

    // 设置多选框联动效果按钮展示
    // 改变多选框
    function onSelectChange(selectedRowKeys: any) {
        changeSelectedRowKeys(selectedRowKeys);
        if (selectedRowKeys.length) {
            setShow(true);

        } else {
            setShow(false)
        }
    };
    // 将单选框赋值
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: false
    };
    // 批量删除
    // 批量删除
    function delAls() {
        selectedRowKeys.length && selectedRowKeys.map((item: any) => {
            // dispatch({
            //     type: 'page/delPageList',
            //     payload: item
            // })
            // dispatch({
            //     type: 'page/getPageList',
            //     payload: page
            // })
        })
    }
    async function confirm() {
        delAls();
        message.success('删除成功');
        setShow(false)
    }

    // 分页配置
    const paginationProps = {
        onChange: (page: number) => handlePageChange(page), //改变页码的函数   
    }
    // 获取当前页码
    function handlePageChange(page: number) {
        setPage(page);
    }

    // 悬停提示框
    function handleHoverChange1(visible: boolean) {
        setHovered1(visible);
    }
    function handleHoverChange2(visible: boolean) {
        setHovered2(visible);
    }
    function handleHoverChange3(visible: boolean) {
        setHovered3(visible);
    }

    // 穿梭框选择table表头项
    function handleShowFlagOk() {
        setShowFlag(false);
    }
    function handleShowFlagCancel() {
        setShowFlag(false);
    }
    function onChange(nextTargetKeys: string[], direction: string, moveKeys: any) {
        console.log('targetKeys:', nextTargetKeys);
        console.log('direction:', direction);
        console.log('moveKeys:', moveKeys);
        setTargetKeys(nextTargetKeys);
    };
    function onSelectChangeTransfer(sourceSelectedKeys: string[], targetSelectedKeys: string[]) {
        console.log('sourceSelectedKeys:', sourceSelectedKeys);
        console.log('targetSelectedKeys:', targetSelectedKeys);
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys] as never[]);
    };
    function onScroll(direction: string, e: any) {
        console.log('direction:', direction);
        console.log('target:', e.target);
    };

    // 搜索
    function search() {
        dispatch({
            type: 'sysUser/getUserSearchList',
            payload: {
              username: searchCon
            }
        });
    }

    // 新增
    function handleOkAdd () {
        
    }
    function handleCancel () {
        
    }

    return <div className={styles.prodpAge}>
        <nav>
        </nav>
        <section>
            <div className={styles.search}>
                <span>参数名</span>
                <span className={styles.inputForm}><Input type="text" placeholder='参数名' ref={inputRef} value={searchCon} onChange={(e) => setSearchCon((e.target as any).value)} /></span>
                <Button type="primary" icon={<SearchOutlined />} onClick={search}>搜索</Button>
                <Button icon={<DeleteOutlined />} onClick={()=>setSearchCon('')}>清空</Button>
            </div>
            <div className={styles.addAndDel}>
                <div>
                    <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                    <Button disabled>批量删除</Button>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOkAdd} onCancel={handleCancel}>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </Modal>
                </div>
                <div>
                    <Popover
                        content={'刷新'}
                        trigger="hover"
                        visible={hovered1}
                        onVisibleChange={handleHoverChange1}
                    >
                        <span onClick={() => location.reload()}>     <SyncOutlined />
                        </span>
                    </Popover>

                    <Popover
                        content={'显隐'}
                        trigger="hover"
                        visible={hovered2}
                        onVisibleChange={handleHoverChange2}
                    > <span onClick={() => setShowFlag(true)}>
                            <AppstoreFilled /></span>
                    </Popover>
                    <Modal title="多选" visible={showFlag} onOk={handleShowFlagOk} onCancel={handleShowFlagCancel} footer={null}>
                        <Transfer
                            dataSource={columns}  // 数据源
                            titles={['隐藏', '显示']} // 标题集合
                            targetKeys={targetKeys} // 显示在右侧框数据的 key 集合
                            selectedKeys={selectedKeys} // 设置哪些项应该被选中
                            onChange={onChange} // 选项在两栏之间转移时的回调函数
                            onSelectChange={onSelectChangeTransfer} // 选中项发生改变时的回调函数
                            onScroll={onScroll} // 选项列表滚动时的回调函数
                            render={(item: any) => { // 每行数据渲染函数
                                console.log(item, 'item...');
                                return item.title
                            }}
                        />
                    </Modal>
                    <Popover
                        content={'搜索'}
                        trigger="hover"
                        visible={hovered3}
                        onVisibleChange={handleHoverChange3}
                    >
                        <span onClick={() => setShow(!show)}><SearchOutlined />
                        </span>
                    </Popover>
                </div>
            </div>
            <div className={styles.selectNum}>
                当前表格已选择 <span>0</span> 项  <a href="">清空</a>
            </div>
            <div className={styles.table}>
                <Table columns={columns} dataSource={searchCon ? UserSearchList : userList} rowSelection={rowSelection} pagination={paginationProps} bordered
                />
            </div>


        </section>
    </div>
}

export default ConfigTag;


